<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修复验证测试页面</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/ilovefree-migration.css">
    <link rel="stylesheet" href="assets/css/enhanced-layout.css">
    <link rel="stylesheet" href="assets/css/fontawesome-icons.css">
    <style>
        .test-page {
            padding: 20px;
            background: var(--gradient-bg);
            min-height: 100vh;
        }
        .test-header {
            text-align: center;
            margin-bottom: 40px;
            color: var(--text-primary);
        }
        .test-section {
            margin: 40px 0;
            padding: 30px;
            background: var(--bg-glass);
            border-radius: var(--radius-lg);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .status {
            padding: 15px;
            border-radius: var(--radius-md);
            margin: 20px 0;
            font-weight: bold;
        }
        .status.success {
            background: rgba(46, 213, 115, 0.2);
            color: #2ed573;
            border: 1px solid #2ed573;
        }
        .status.error {
            background: rgba(255, 71, 87, 0.2);
            color: #ff4757;
            border: 1px solid #ff4757;
        }
        .status.info {
            background: rgba(3, 150, 255, 0.2);
            color: var(--ilovefree-blue);
            border: 1px solid var(--ilovefree-blue);
        }
        .console-log {
            background: #2d3748;
            color: #e2e8f0;
            padding: 15px;
            border-radius: var(--radius-md);
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 14px;
            max-height: 200px;
            overflow-y: auto;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <div class="test-page">
        <div class="test-header">
            <h1>🔧 ILOVEFREE修复验证页面</h1>
            <p>测试所有修复的样式和JavaScript功能</p>
        

        <div class="test-section">
            <h2>📊 CSS变量测试</h2>
            <div id="css-variables-status" class="status info">检查中...
            <div class="console-log" id="css-variables-log">
        

        <div class="test-section">
            <h2>🏷️ 分类标题样式测试</h2>
            <div class="category-header">
                <div class="category-title">
                    <div class="category-icon">
                    <h2 class="category-name">测试分类标题样式</h2>
                
                <div class="category-line">
            
            <div id="category-header-status" class="status info">检查中...
        

        <div class="test-section">
            <h2>🏷️ 标签系统测试</h2>
            <div class="tags-container" id="test-tags">
                <span class="tag-label">筛选：</span>
                <button class="tag-btn active" data-tag-id="1" data-tag-filter="推荐">
                    推荐
                    <span class="tag-count">5</span>
                </button>
                <button class="tag-btn" data-tag-id="2" data-tag-filter="测试">
                    测试
                    <span class="tag-count">3</span>
                </button>
                <button class="tag-btn" data-tag-id="3" data-tag-filter="验证">
                    验证
                    <span class="tag-count">2</span>
                </button>
            
            <div id="tags-system-status" class="status info">检查中...
        

        <div class="test-section">
            <h2>🎴 导航卡片测试</h2>
            <div class="nav-grid" id="test-cards">
                <div class="nav-card" data-tag-filters="推荐,测试">
                    <a href="#" onclick="return false;">
                        
                            <img src="https://picsum.photos/seed/test-card1/200/120.jpg" alt="测试卡片1" loading="lazy">
                            <h4>测试网站1</h4>
                            <p>这是一个测试描述，验证卡片样式效果</p>
                            <div class="nav-badge">测试
                        
                    </a>
                
                <div class="nav-card" data-tag-filters="推荐,验证">
                    <a href="#" onclick="return false;">
                        
                            <img src="https://picsum.photos/seed/test-card2/200/120.jpg" alt="测试卡片2" loading="lazy">
                            <h4>测试网站2</h4>
                            <p>另一个测试卡片，验证标签过滤功能</p>
                            <div class="nav-badge">验证
                        
                    </a>
                
                <div class="nav-card" data-tag-filters="测试">
                    <a href="#" onclick="return false;">
                        
                            <img src="https://picsum.photos/seed/test-card3/200/120.jpg" alt="测试卡片3" loading="lazy">
                            <h4>测试网站3</h4>
                            <p>只有测试标签的卡片</p>
                            <div class="nav-badge">测试
                        
                    </a>
                
            
            <div id="nav-cards-status" class="status info">检查中...
        

        <div class="test-section">
            <h2>🔧 JavaScript功能测试</h2>
            <div id="js-status" class="status info">检查中...
            <div class="console-log" id="js-log">
            <button onclick="testFilterFunction()" style="padding: 10px 20px; background: var(--ilovefree-blue); color: white; border: none; border-radius: var(--radius-md); cursor: pointer; margin: 10px;">
                测试标签过滤功能
            </button>
        
    

    <!-- JavaScript 脚本 -->
    <script src="assets/js/ilovefree-migration.js"></script>
    <script>
        // 捕获控制台日志
        const originalLog = console.log;
        const logs = [];

        console.log = function(...args) {
            originalLog.apply(console, args);
            logs.push(args.join(' '));
            updateConsoleLog();
        };

        function updateConsoleLog() {
            const jsLog = document.getElementById('js-log');
            if (jsLog) {
                jsLog.innerHTML = logs.slice(-10).join('<br>'); // 显示最后10条日志
            }
        }

        // 测试页面加载完成后的验证
        document.addEventListener('DOMContentLoaded', () => {
            setTimeout(() => {
                runAllTests();
            }, 1000); // 等待1秒让JavaScript初始化
        });

        function runAllTests() {
            testCSSVariables();
            testCategoryHeader();
            testTagsSystem();
            testNavCards();
            testJavaScript();
        }

        function testCSSVariables() {
            const root = document.documentElement;
            const ilovefreeBlue = getComputedStyle(root).getPropertyValue('--ilovefree-blue');
            const ilovefreeLight = getComputedStyle(root).getPropertyValue('--ilovefree-light');

            const status = document.getElementById('css-variables-status');
            const log = document.getElementById('css-variables-log');

            if (ilovefreeBlue && ilovefreeLight) {
                status.className = 'status success';
                status.textContent = '✅ CSS变量加载成功';
                log.innerHTML = `--ilovefree-blue: ${ilovefreeBlue}<br>--ilovefree-light: ${ilovefreeLight}`;
            } else {
                status.className = 'status error';
                status.textContent = '❌ CSS变量加载失败';
                log.innerHTML = '变量未正确加载';
            }
        }

        function testCategoryHeader() {
            const categoryHeader = document.querySelector('.category-header');
            const categoryIcon = document.querySelector('.category-icon');

            const status = document.getElementById('category-header-status');

            if (categoryHeader && categoryIcon) {
                const iconStyle = getComputedStyle(categoryIcon);
                const hasGradient = iconStyle.background && iconStyle.background.includes('gradient');

                if (hasGradient) {
                    status.className = 'status success';
                    status.textContent = '✅ 分类标题样式正确，渐变图标正常显示';
                } else {
                    status.className = 'status error';
                    status.textContent = '❌ 分类标题图标渐变效果未显示';
                }
            } else {
                status.className = 'status error';
                status.textContent = '❌ 分类标题元素未找到';
            }
        }

        function testTagsSystem() {
            const tagsContainer = document.getElementById('test-tags');
            const activeBtn = tagsContainer?.querySelector('.tag-btn.active');

            const status = document.getElementById('tags-system-status');

            if (tagsContainer && activeBtn) {
                status.className = 'status success';
                status.textContent = '✅ 标签系统结构正确，默认激活状态正常';
            } else {
                status.className = 'status error';
                status.textContent = '❌ 标签系统结构有问题';
            }
        }

        function testNavCards() {
            const navCards = document.querySelectorAll('.nav-card');
            const navLinks = document.querySelectorAll('.nav-link');

            const status = document.getElementById('nav-cards-status');

            if (navCards.length > 0 && navLinks.length === navCards.length) {
                status.className = 'status success';
                status.textContent = `✅ 导航卡片结构正确，找到${navCards.length}个卡片`;
            } else {
                status.className = 'status error';
                status.textContent = '❌ 导航卡片结构有问题';
            }
        }

        function testJavaScript() {
            const status = document.getElementById('js-status');

            if (window.ilovefreeMigration) {
                const categories = window.ilovefreeMigration.categories;
                const categoryCount = Object.keys(categories).length;

                status.className = 'status success';
                status.textContent = `✅ JavaScript迁移系统正常，加载了${categoryCount}个分类`;
            } else {
                status.className = 'status error';
                status.textContent = '❌ JavaScript迁移系统未初始化';
            }
        }

        function testFilterFunction() {
            if (window.ilovefreeMigration) {
                console.log('🧪 开始测试标签过滤功能...');

                // 测试点击"验证"标签
                const verifyBtn = document.querySelector('[data-tag-filter="验证"]');
                if (verifyBtn) {
                    verifyBtn.click();
                    setTimeout(() => {
                        const visibleCards = document.querySelectorAll('.nav-card:not(.hidden)').length;
                        console.log(`✅ 过滤测试完成，显示${visibleCards}个卡片`);
                    }, 500);
                }
            }
        }
    </script>
</body>
</html>